<script>
import CardContainer from "../components/CardContainer.vue";
import SecondTitle from "../components/SecondTitle.vue";
import RegisterArea from "../components/RegisterArea.vue";
import RegisterSevenDays from "../components/RegisterSevenDays.vue";
import RegisterOverdue from "../components/RegisterOverdue.vue";
import { getCardStyle } from "../utils/index";
export default {
  components: {
    CardContainer,
    SecondTitle,
    RegisterArea,
    RegisterSevenDays,
    RegisterOverdue,
  },
  props: {
    year: Number,
  },
  data() {
    return {
      style: {
        width: "460px",
        height: "960px",
      },
    };
  },
  mounted() {
    this.getComputedStyle();
    window.addEventListener("resize", this.getComputedStyle);
  },
  methods: {
    getComputedStyle() {
      const { width, height } = getCardStyle();
      this.style.width = width;
      this.style.height = height;
    },
  },
};
</script>
<template>
  <div>
    <CardContainer title="立案登记情况" right-title="" :style="style">
      <SecondTitle title="单位占比" :custom-style="style" />
      <RegisterArea :year="year" />
      <SecondTitle title="立案数量趋势" :custom-style="style" />
      <RegisterSevenDays />
      <SecondTitle title="立案逾期" />
      <RegisterOverdue />
    </CardContainer>
  </div>
</template>

<style lang="scss" scoped></style>
